import React, { Component } from "react";
import "./registry.scss";

// 引入 antd
import { Form, Input, Button } from "antd";

// 引入axios
import axios from "axios";

class Registry extends Component {
    constructor(props){
     super(props);

     this.onSet=this.onSet.bind(this);
     this.onFinish=this.onFinish.bind(this);
     this.onFinishFailed=this.onFinishFailed.bind(this);
    }

   onSet= async (values)=>{
    // console.log(values,'123');
    const res = await axios.post("/api/registry", {
      phone: values.user,
      password: values.password,
    });
    console.log(res);
  }

  onFinish = (values) => {
    // console.log("Success:", values);
    this.onSet(values);
  };

  onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };

  render() {
    return (
      <div className="Registry">
        <Form
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={this.onFinish}
          onFinishFailed={this.onFinishFailed}
        >
          <Form.Item
            label="用户名"
            name="user"
            rules={[{ required: true, message: "Please input your username!" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: "Please input your password!" }]}
          >
            <Input.Password />
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
            <Button type="primary" htmlType="submit">
              注册
            </Button>

            <Button htmlType="button" onClick={() => this.props.history.go(-1)}>
              返回
            </Button>
          </Form.Item>
        </Form>
      </div>
    );
  }
}

export default Registry;
